<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //演示(阻止)冒泡事件

        window.onload = function () {
            let oBtn = document.getElementById('btn1');
            let oDiv = document.getElementById('div1');

            oBtn.onclick = function (ev) {
                oDiv.style.display = 'block';

                ev.cancelBubble = true; //阻止冒泡
                //js中的所有事件都会从子节点再传入父节点
                //如果不阻止则点击事件会通过ev一直传递给上一层父级(input → div → body)
                //最终传递到document触发document.onclick事件,导致点击后取消了show的效果
            };

            document.onclick = function () {
                oDiv.style.display = 'none';
            };

            //当点击div后不会让点击事件继续上传至父级(使div消失)
            oDiv.onclick = function (ev) {
                ev.cancelBubble = true;
            };

        };




    </script>
</head>

<body>

<div>
    <input type = "button" value="show" id="btn1">
    <br>
    <br>
    <div style="height: 200px; width: 300px; background: pink;display: none" id="div1">

    </div>

</div>

</body>
</html>